<template>


  <!-- 购物车头部组件 -->
  <div id="CartTop">
    <catrtop />
  </div>
  <!-- 购物车主题 -->
  <!-- 向后端发送请求获取数据，展示数据 -->
  <div id="Catalog">
    <div id="Cart">
      <h2>购物车</h2>
      <table>
        <thead>
           <tr class="bg-gray-100 text-left">
          <th class="p-2">商品编号</th>
          <th class="p-2">产品编号</th>
          <th class="p-2">属性</th>
          <th class="p-2">库存</th>
          <th class="p-2">数量</th>
          <th class="p-2">单价</th>
          <th class="p-2">小计</th>
        </tr>
        </thead>

        <tr id="add" v-if="cartItems.length === 0">
          <td colspan="8"><b>你的购物车为空。</b></td>
        </tr>
        <tbody>
          <tr v-if="loading">
            <td colspan="7">加载中...</td>
          </tr>
           <tr v-for="item in cartItems" :key="item.id" class="border-t">
          <td class="p-2">{{ item.id }}</td>
          <td class="p-2">{{ item.productId }}</td>
          <td class="p-2">{{ item.attribute }}</td>
          <td class="p-2" :class="{ 'text-green-600': item.inStock, 'text-red-500': !item.inStock }">
            {{ item.inStock ? '有货' : '缺货' }}
          </td>
          <td class="p-2">{{ item.quantity }}</td>
          <td class="p-2">¥{{ item.price.toFixed(2) }}</td>
          <td class="p-2">¥{{ item.total.toFixed(2) }}</td>
        </tr>

        </tbody>
      </table>
    </div>
    <div id="Separator">&nbsp;</div>
    <div class="pay"><el-button type="primary" @click="pay">支付</el-button></div>
  </div>

  
  <!--购物车底部组件-->
  <div id="CartBottom">
    <cartbottom />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import catrtop from '../components/CartPageTop.vue';
import cartbottom from '../components/CartPageBottom.vue';
import axios from 'axios'; // 假设你已经安装了axios;


// 动态获取购物车数据
 // 定义购物车项的类型
    interface CartItem {
      username: string,                 
      id: number;
      productId: number;
      attribute: string;
      price: number;
      inStock: boolean;
      quantity: number;
      total: number;
    }
const cartItems = ref<CartItem[]>([]);
const loading = ref(true)

//在组件挂载后执行一次，常用于初始化加载数据
onMounted(async () => {
  try {
    console.log('获取购物车数据')
    const response = await axios.get('api/carts',{
      headers: {
        'Authorization': localStorage.getItem('token') // 假设你的token存储在localStorage中
      }
    }) // 路径根据实际后端接口改
    const data = response.data.data
    // 明确指定 cart 的类型为 any 以解决隐式 any 类型的问题
    cartItems.value = data.carts.map((cart:any) => ({
      id: cart.item.itemId,
      productId: cart.item.productId,
      attribute: cart.item.attribute1,
      price: cart.item.listPrice,
      inStock: cart.cartList.inStock,
      quantity: cart.cartList.quantity,
      total: cart.itemPrice
    }))

  } catch (err) {
    console.error('获取购物车失败:', err)
  } finally {
    loading.value = false
  }
})


// 模拟登录账户数据
const loginAccount = ref({
  listOption: true
});

const router = useRouter();
//点击支付按钮
const pay = () => {
  router.push('/order')
}





</script>

<style scoped>
#Catalog {
  margin-top: 15vh;
  margin-bottom: 15vh;

}

/* 可以在这里添加购物车页面的样式 */
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

.remove {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.remove:hover {
  background-color: #d32f2f;
}

.Button {
  display: inline-block;
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}

.Button:hover {
  background-color: #45a049;
}
</style>
